<template>
  <div class="app-container">
    <div class="tag-container">
      <el-tag :key="tag.id" v-for="tag in dynamicTags" closable :disable-transitions="false"
        @close="handleClose(tag.id)">

        <el-button class="edit-button" type="text" size="mini" @click="showEditDialog(tag)">
          <i class="el-icon-edit"></i>
        </el-button>
        {{ tag.name }}
      </el-tag>
      <el-button class="button-new-tag" size="small" @click="showInput">+ 添加{{ title }}</el-button>
    </div>

    <!-- 新增片区 -->
    <el-dialog :title="'新增' + title" :visible.sync="dialogVisible" width="500px">
      <el-form :model="form" label-width="80px">
        <el-form-item :label="title + '名称'">
          <el-input v-model="form.name" :placeholder="'请输入' + title + '名称'"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="form.sort" :min="0" label="描述文字"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleAddTag">确定</el-button>
      </div>
    </el-dialog>

    <!-- 修改片区 Dialog 弹窗 -->
    <el-dialog :title="'修改' + title" :visible.sync="editDialogVisible" width="500px">
      <el-form :model="editForm" label-width="80px">
        <el-form-item :label="title + '名称'">
          <el-input v-model="editForm.name" :placeholder="'请输入' + title + '名称'"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="editForm.sort" :min="0" label="描述文字"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEditTag">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getObjTypeList, delObjType, saveObjType } from '@/api/objType';
export default {
  name: 'objectTypeTag',
  props: {
    type: {
      type: String,
      required: true
    },
    title: {
      type: String,
      default: '片区' // 默认值为 "片区"
    }
  },
  data() {
    return {
      dynamicTags: [],
      dialogVisible: false,
      editDialogVisible: false,
      form: {
        name: '', // 新增的名称
        sort: 0
      },
      editForm: {
        id: null, // 当前编辑的标签 ID
        name: '', // 编辑的名称
        sort: 0
      }
    }
  },
  created() {
    this.getObjTypeList()
  },
  methods: {
    async getObjTypeList() {
      const queryParams = { type: this.type }
      const { data } = await getObjTypeList(queryParams)
      this.dynamicTags = data

    },
    async handleClose(id) {
      // 删除
      await delObjType({ id: id })
      this.$message.success(`删除${this.title}成功`)
      this.getObjTypeList()
    },

    showInput() {
      this.dialogVisible = true;
      this.form.name = ''; // 清空输入框内容
    },

    // 确定新增标签
    async handleAddTag() {
      if (this.form.name.trim()) {
        await saveObjType({ ...this.form, type: this.type })
        this.$message.success(`新增${this.title}成功`)
        this.getObjTypeList()
        this.dialogVisible = false; // 关闭弹窗
      } else {
        this.$message.warning(`${this.title}名称不能为空`);
      }
    },
    // 显示修改弹窗
    showEditDialog(tag) {
      this.editForm = { ...tag }; // 复制当前标签的数据到表单
      this.editDialogVisible = true;
    },
    // 确定修改标签
    async handleEditTag() {
      if (this.editForm.name.trim()) {

        await saveObjType({ ...this.editForm, type: this.type }) // 调用后端接口更新数据
        this.$message.success(`修改${this.title}成功`);
        this.getObjTypeList(); // 刷新标签列表
        this.editDialogVisible = false; // 关闭弹窗
      } else {
        this.$message.warning(`${this.title}名称不能为空`);
      }
    }
  }
}
</script>
<style scoped>
.app-container {
  background: #fff;
  display: flex;
  border-radius: 5px;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  /* 自动换行 */
  gap: 10px;
  /* 标签之间的间距 */
  align-items: center;
}

.el-tag {
  margin: 0;
  /* 移除默认的 margin */
}

.button-new-tag {
  /* margin-left: 10px; */
  /* 确保按钮与标签之间有间距 */
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
</style>
